<template>
  <div class="shiyong" ref="shiyong"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, reactive,watch } from "vue";
const shiyong = ref(null);
const option = reactive({
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,.6)",
    borderColor: "rgba(147, 235, 248, 0)",
    textStyle: {
      color: "#FFF",
    },
    axisPointer: {
      type: "shadow",
      label: {
        show: true,
      },
    },
  },
  grid: {
    left: "0%",
    top: "1%",
    right: "0%",
    bottom: "30%",
  },
  xAxis: {
    data: ["图书馆", "体育馆", "实验楼", "超市", "会议室"],
    axisLabel: {
      show: true,
      textStyle: {
        color: "#FFF", //X轴文字颜色
        fontSize: 12,
      },
      interval: 0,
    },
  },
  yAxis: [
    {
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.15)",
        },
      },
    },
    {
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      type: "bar",
      barWidth: 50,
      itemStyle: {
        color: {
          type: "linear",
          x: 0, //右
          y: 0, //下
          x2: 0, //左
          y2: 1, //上
          colorStops: [
            {
              offset: 0.1,
              color: "#9311ff", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#2737ff", // 100% 处的颜色
            },
          ],
        },
        barBorderRadius: [20, 20, 0, 0],
      },
      label: {
        show: false,
        position: "top",
        distance: 0,
        color: "#1ACDDC",
      },
      data: [200, 741, 275, 305, 415, 405],
    },
    {
      // name: '背景',
      type: "bar",
      barWidth: "60px",
      xAxisIndex: 0,
      yAxisIndex: 1,
      barGap: "-110%",
      data: [40, 20, 30, 50, 60], //背景阴影长度
      itemStyle: {
        normal: {
          color: "rgba(255,255,255,0.039)",
          barBorderRadius: [20, 20, 20, 20],
        },
      },
    },
  ],
});
let asd;
onMounted(() => {
  asd = echarts.init(shiyong.value);
  asd.setOption(option);
});
window.addEventListener("resize", function () {
  asd.resize();
});
watch(option, () => {
  asd.setOption(option);
});
</script>

<style lang="scss">
.shiyong {
  width: 90%;
  height: 100%;
  margin: 0 5%;
  overflow: hidden;
}
</style>
